<template>
  <div class="theme-switcher">
    <h3>主题设置 - 多色</h3>

    <div
      v-for="colorType in colorTypes"
      :key="colorType"
      class="setting-item"
    >
      <span>{{ getColorTypeName(colorType) }}：</span>
      <el-color-picker
        v-model="themeColors[colorType]"
        show-alpha
        @change="(color) => changeThemeColor(color, colorType)"
      />
    </div>

    <div class="setting-item">
      <span>暗色模式：</span>
      <el-switch
        v-model="darkMode"
        @change="toggleDark"
      />
    </div>

    <div class="preset-themes">
      <span>预设主题：</span>
      <div class="theme-list">
        <el-button
          v-for="theme in presetThemes"
          :key="theme.name"
          size="small"
          @click="applyPresetTheme(theme)"
        >
          {{ theme.name }}
        </el-button>
      </div>
    </div>

    <div class="button-row" style="margin-top: 20px;">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

import { setThemeColor, setThemeColors, toggleDarkMode } from '~theme/index.js'

const darkMode = ref(false)

const colorTypes = ['primary', 'success', 'warning', 'danger', 'info']

const themeColors = reactive({
  primary: '#409EFF',
  success: '#67C23A',
  warning: '#E6A23C',
  danger: '#F56C6C',
  info: '#909399'
})

const presetThemes = [
  {
    name: '默认',
    colors: {
      primary: '#409EFF',
      success: '#67C23A',
      warning: '#E6A23C',
      danger: '#F56C6C',
      info: '#909399'
    }
  },
  {
    name: '绿色',
    colors: {
      primary: '#5CBE6C',
      success: '#85CE3B',
      warning: '#F5A742',
      danger: '#FF7B7B',
      info: '#A5A8B0'
    }
  },
  {
    name: '紫色',
    colors: {
      primary: '#805CBE',
      success: '#5AC18E',
      warning: '#FFB84D',
      danger: '#FF6B6B',
      info: '#8A8DA0'
    }
  },
  {
    name: '橙色',
    colors: {
      primary: '#FF8C42',
      success: '#66BB6A',
      warning: '#FFCA28',
      danger: '#EC407A',
      info: '#78909C'
    }
  }
]

const getColorTypeName = (type) => {
  const typeMap = {
    primary: '主色',
    success: '成功',
    warning: '警告',
    danger: '危险',
    info: '信息'
  }
  return typeMap[type] || type
}

const changeThemeColor = (color, type) => {
  setThemeColor(color, type)
}

const toggleDark = (isDark) => {
  toggleDarkMode(isDark)
}

const applyPresetTheme = (theme) => {
  Object.assign(themeColors, theme.colors)
  setThemeColors(theme.colors)
}

onMounted(() => {
  // 从 localStorage 获取保存的主题色
  colorTypes.forEach(type => {
    const savedColor = localStorage.getItem(`theme-color-${type}`)
    if (savedColor) {
      themeColors[type] = savedColor
    }
  })

  // 从 localStorage 获取暗色模式设置
  darkMode.value = localStorage.getItem('dark-mode') === 'true'
})
</script>

<style scoped>
.theme-switcher {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.setting-item span {
  margin-right: 10px;
  width: 60px;
  font-size: 14px;
}

.preset-themes {
  margin-top: 20px;
}

.preset-themes span {
  margin-right: 10px;
  font-size: 14px;
}

.theme-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
</style>
